<template>
  <div class="page-wrap">
    <div class="page-title">BaseChart 通用Chart</div>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <BaseChart
        :option="option"
        @click="click"
        :width="'100%'"
        ref="BaseChartRef"
      />
    </codeShow>
    <div class="page-sub-title">BaseChart API</div>
    <el-table :data="tableData" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        label="属性名"
        align="left"
        width="150"
        prop="attr"
      ></el-table-column>
      <el-table-column
        label="说明"
        align="left"
        prop="illustrate"
      ></el-table-column>
      <el-table-column
        label="类型"
        align="left"
        width="150"
        prop="type"
      ></el-table-column>
      <el-table-column
        label="默认值"
        align="left"
        width="150"
        prop="default"
      ></el-table-column>
    </el-table>
    <div class="page-sub-title">BaseChart 事件</div>
    <div>
      支持所有echarts事件，详见<a href="https://echarts.apache.org/zh/api.html"
        >https://echarts.apache.org/zh/api.html</a
      >
    </div>
  </div>
</template>

<script setup>
import codeShow from '../../components/code.vue'
// import { BaseChart } from 'cds-ui-business-components'
import BaseChart from '../../../../packages/businessComponents/cdsBaseChart/src/baseChart.vue'
import { nextTick, onMounted, ref } from 'vue';
const click = (param) => {
  console.log(param)
}
const tableData = ref([
  {
    'attr': 'option', 'illustrate': '图表配置（详见https://echarts.apache.org/zh/option.html#title）', 'type': 'Object', 'default': "{}"
  },
  {
    'attr': 'width', 'illustrate': '图表宽度', 'type': 'String', 'default': "400px"
  },
  {
    'attr': 'height', 'illustrate': '图表高度', 'type': 'String', 'default': "300px"
  },
])
const BaseChartRef = ref(null);
//BaseChart chart实例对象
const BaseChartRef_instance = ref(null);
onMounted(() => {
  nextTick(() => {
    BaseChartRef_instance.value = BaseChartRef.value.instance;
  })
})
const option = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    bottom: "15%",
  },
  dataZoom:
  {
    show: true,
    type: 'slider',
    realtime: true,
    start: 0,
    end: 30,
    bottom: 5,
    height: 20
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});

const code1 = `
//template
   <BaseChart
        :option="option"
        @click="click"
        :width="'100%'"
        ref="BaseChartRef"
      />
//script 
import { BaseChart } from 'cds-ui-business-components' 
const click = (param) => {
}
const BaseChartRef = ref(null);
//BaseChart chart实例对象
const BaseChartRef_instance = ref(null);
onMounted(() => {
  nextTick(() => {
    BaseChartRef_instance.value = BaseChartRef.value.instance
  })
})
const option = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    bottom: "15%",
  },
  dataZoom:
  {
    show: true,
    type: 'slider',
    realtime: true,
    start: 0,
    end: 30,
    bottom: 5,
    height: 20
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});
`;
</script>

<style lang="scss" scoped>
</style>